<template>
    <el-checkbox-group
        ref="checkboxGroupRef"
        v-bind="$attrs"
    >
        <template v-if="optionType === `checkbox`">
            <!-- eslint-disable-next-line -->
            <el-checkbox
                v-for="item in computedOptions"
                v-bind="item"
            >
                {{ item.customLabel }}
            </el-checkbox>
        </template>
        <template v-if="optionType === `button`">
            <!-- eslint-disable-next-line -->
            <el-checkbox-button
                v-for="item in computedOptions"
                v-bind="item"
            >
                {{ item.customLabel }}
            </el-checkbox-button>
        </template>
    </el-checkbox-group>
</template>

<script setup>
import { computed, ref, useAttrs } from 'vue'
const checkboxGroupRef = ref(null)

const props = defineProps({
    optionType: {
        type: String,
        default: 'checkbox',
        validator: val => ['checkbox', 'button'].includes(val)
    },
    options: {
        type: Array,
        default: () => []
    },
    transOptions: {
        type: Function,
        default: option => {
            const { label, customLabel, ...args } = option
            return {
                key: label,
                label,
                customLabel: Reflect.has(option, 'customLabel') ? customLabel : label,
                ...args
            }
        }
    }
})

const computedOptions = computed(() => {
    return props.options.map(option => {
        return props.transOptions(option)
    })
})

const attrs = useAttrs()
defineExpose({
    checkboxGroupRef
})
</script>

<style lang="scss" scoped>

</style>